<template>
  <div class="page">
    <m-header title="景点收益" :canback="Boolean(1)">
    </m-header>
    <div class="body" v-if="data">
      <ul v-if="data && data.data && data.data.length>0">
        <li class="list" v-for="(item,index) in data.data" :key="index">
          
          <div class="mine-grab">
            <span>{{item.levelname}}</span>
            <span class="list-num2">收益：{{item.credit5}}</span>
          </div>
          <div class="mine-grab">
            <span>订单：{{item.ordersn}}</span>
          </div>
          <div class="mine-grab">
            <span>到期时间：{{item.due_time}}</span>
          </div>
          <div class="mine-grab">
            <span>抢购时间：{{item.success_time}}</span>
          </div>
        </li>
      </ul>
      <next v-show="!data || !data.data || data.data.length==0" ref="next" :nomore="true"></next>
    </div>
  </div>
</template>
<script>
import {mapGetters} from 'vuex';
import {Owner} from '@/server/server.js';
import {Load,Secret,Util} from '@/assets/commonjs/utils.js';
export default {
  data() {
      return {
          data:null
      };
  },
  created(){
      this.getProfitDetail();
  },
  mounted() {
    this.initData();

  },
  computed:{
      ...mapGetters(['uid','coinTxt'])
  },
  methods: {
    initData(){
      Load.loadNext(this);
    },
    getProfitDetail(){
      const param = {
        id:this.uid,
      }
      Owner.getProfitDetail(param).then(res=>{
        const data = JSON.parse(Secret.decrypt(res.data)); 
        data.data.forEach(item=>{
          item.due_time  = Util.formatDate(item.due_time)
          item.success_time  = Util.formatDate(item.success_time)
        })
        console.log(data)
        this.data = data
      })
    }
  }
};
</script>
<style lang="less" scoped>
@import "~link-less";
.body {
  // background: @bg-color;
  padding: 30px;
  color: @bg-color-white;
  .content {
    // height: 220px;
    padding: 60px 0 30px;
    background: @bg-card-color;
    border-radius: 8px;
    .btns {
        .display-flex();
        justify-content: center;
        align-items: center;
        border-radius: 8px;
      }
      .recharge {
        width: 50%;height: 70px;line-height: 70px;
        // margin: auto;margin-top: 57px;
        margin-top: 30px;
        border-radius: 20px;
        text-align: center;
      }
    .num {
      text-align: center;
      color: @primary-color;
      font-size: 40px;
      .total{
        color: @primary-color;
        font-size: 32px;
      }
    }
  }
  .list {
      margin-top: 20px;
      padding: 20px 30px;
      background: @bg-card-color;
      border-radius: 8px;
      .mine-grab {
        .display-flex();
        justify-content: space-between;
        padding-bottom: 8px;
        .list-num1 {
          font-size: 32px;
          color: red;
        }
        .list-num2 {
          font-size: 32px;
          color: @color-yellow;
        }
      }
    }
}
</style>
